<template>
  <!--漂浮物-->
  <div class="block1" v-if="isShow" :style="  scrollTop > 600 ?  ('position: fixed;top:20px;')  : 'top:600px;' ">
    <div class="title"><img src="../../assets/home/img/linkkefu.png"></div>
    <div class="wechat-advisory" v-if="site.weixin_logo != ''">
      <img  width="118" height="118" :src="site.weixin_logo">
      <div style="margin-top: 10px; color: rgb(102, 102, 102);">微信咨询</div>
    </div>

    <div class="qq-advisory">
      <div style="display: flex; align-items: center; justify-content: center;">
        <img src="../../assets/home/img/qq_black.png" width="16" height="16">
        <span  style="margin-left: 6px;">客服QQ</span>
      </div>
      <div class="qq-number">{{ site.custom_qq }}</div>
    </div>

    <div  class="qq-advisory">
      <div style="display: flex; align-items: center; justify-content: center;">
        <img  src="../../assets/home/img/tel.png" alt="" width="16" height="16">
        <span style="margin-left: 6px;">客服电话</span>
      </div>
      <div  class="qq-number"> {{ site.custom_tel }}</div>
    </div>

    <div  class="work-time">工作时间:8:00～22:00</div>

    <a  :href="'tencent://message/?uin=' + site.custom_qq + '&Site=daifatu.com&amp;amp;Menu=yes'">
      <div class="btn"><img src="../../assets/home/img/qq.png" width="20" height="20">
        <span >QQ咨询</span>
      </div>
    </a>
    <div class="pop-close" @click="isShow = false;"><img src="../../assets/home/img/home-close.png"/> </div>
  </div>



</template>


<script>
    export default {
        name: "rides-float",
        computed: {},
        data() {
            return {
                ismmOpen : false,
                site : null,
                scrollTop : 600,
                isShow:true
            }
        },
        mounted() {
            window.addEventListener('scroll',this.handleScroll,true)
        },

        created() {
            this.site = global_site;
        },
        methods: {
            handleScroll(){
                let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                this.scrollTop = scrollTop;
               if(scrollTop > 600) {

               }
            }
        }
    }
</script>

<style >
  .block1{
    width: 176px;
    box-sizing: border-box;
    position: absolute;
    padding: 0 10px 10px;
    right: 15px;
    top: 600px;
    z-index: 100;
    color: #000;
    background: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    display: block;
  }
  .pop-close{ position: absolute;bottom: -50px; left: 70px;cursor: pointer}
  .pop-close img{ width: 30px; }
  .block1 .title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    margin-bottom: 9px;
    position: relative;
  }

  .block1 .title img{
    width: 100%;
    height: 100%;
  }
  .block1 .wechat-advisory{
    border-bottom: 1px solid #EAEAEA;
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .block1 .qq-advisory {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EAEAEA;
    font-size: 18px;
  }

  .block1 .qq-advisory .qq-number {
    font-size: 18px;
    color: #FF464E;
    margin-top: 6px;
    text-align: center;
  }

  .block1 .work-time {
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    color: #262626;
    border-bottom: 1px solid #EAEAEA;
  }
  .block1 .btn{
    margin-top: 12px;
    background: #ff464e;
    line-height: 31px;
    color: #fff;
    border-radius: 2px;
    margin: 12px 10px 0;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

</style>
